<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
import {
  NAlert,
  NButton,
  NCard,
  NDivider,
  NForm,
  NFormItem,
  NIcon,
  NInput,
  NPopconfirm,
  NSpace,
  NSpin,
  NSwitch,
  NTabPane,
  NTabs,
  NTag,
  NList,
  NListItem,
  useDialog,
  useMessage
} from 'naive-ui';
import { $t } from '@/locales';
import {
  fetchAIConfig,
  fetchMediaConfig,
  fetchTranslateConfig,
  fetchPromptWord,
  saveAIConfig,
  saveMediaConfig,
  saveTranslateConfig,
  fetchTranslationOrdering,
  savePromptWord,
  saveTranslationOrdering
} from '@/service/api';
import { taskApi } from '@/service/api/task';
import { VueDraggable } from 'vue-draggable-plus';

defineOptions({
  name: 'MediaConfig'
});

// 消息提示和对话框实例
const message = useMessage();
const dialog = useDialog();

// 当前激活的标签页
const activeTab = ref('media');

// 表单引用和数据
const mediaFormRef = ref<typeof NForm | null>(null);
const mediaFormValue = ref<Api.Config.MediaConfig>({
  id: '',
  moviePaths: '',
  tvPaths: '',
  excludePaths: ''
});


// 翻译配置表单引用和数据
const translateFormRef = ref<typeof NForm | null>(null);
const translateFormValue = ref<Api.Config.TranslateConfig>({
  id: '',
  appId: '',
  secretKey: '',
  enabled: false
});

// 翻译配置表单验证规则
const translateFormRules = {
  appId: {
    required: true,
    message: $t('page.mediaConfig.form.required.appId'),
    trigger: ['blur', 'input']
  },
  secretKey: {
    required: true,
    message: $t('page.mediaConfig.form.required.secretKey'),
    trigger: ['blur', 'input']
  }
};


// AI配置表单引用和数据
const aiFormRef = ref<typeof NForm | null>(null);
const aiFormValue = ref<Api.Config.AIConfig>({
  id: '',
  enabled: false,
  apiKey: '',
  baseUrl: '',
  model: '',
  promptWord: ''
});

// AI配置表单验证规则
const aiFormRules = {
  apiKey: {
    required: true,
    message: $t('page.mediaConfig.form.required.apiKey'),
    trigger: ['blur', 'input', 'change']
  },
  baseUrl: {
    required: true,
    message: $t('page.mediaConfig.form.required.baseUrl'),
    trigger: ['blur', 'input', 'change']
  },
  model: {
    required: true,
    message: $t('page.mediaConfig.form.required.model'),
    trigger: ['blur', 'input', 'change']
  }
};

// 任务列表数据
const taskList = ref<Api.Task.TaskItem[]>([]);
const taskLoading = ref(false);

// 正在执行的任务
const executingTasks = ref<Set<string>>(new Set());

// 翻译优先级数据
const priorityList = ref<Api.Translation.PriorityItem[]>([]);
const priorityLoading = ref(false);
const dragIndex = ref<number>(-1);

/** 加载配置数据 */
// eslint-disable-next-line complexity
async function fetchData() {
  try {
    // 加载媒体配置
    const { data: mediaConfig, error: mediaError } = await fetchMediaConfig();
    if (mediaConfig && !mediaError) {
      mediaFormValue.value = {
        id: mediaConfig.filmPath?.id || '',
        moviePaths: mediaConfig.filmPath?.value || '',
        tvPaths: mediaConfig.seriesPath?.value || '',
        excludePaths: mediaConfig.excludePath?.value || '',
        // 保存完整的配置项信息
        filmPath: mediaConfig.filmPath,
        seriesPath: mediaConfig.seriesPath,
        excludePath: mediaConfig.excludePath
      };
    } else if (mediaError) {
      message.error(mediaError?.message);
    }

    // 加载翻译配置
    const { data: translateConfig, error: translateError } = await fetchTranslateConfig();
    if (translateConfig && !translateError) {
      translateFormValue.value = {
        id: translateConfig.id,
        appId: translateConfig.appId,
        secretKey: translateConfig.secretKey,
        enabled: translateConfig.enabled
      };
    } else if (translateError) {
      message.error(translateError?.message);
    }

    // 加载AI配置
    const { data: aiConfig, error: aiError } = await fetchAIConfig();
    if (aiConfig && !aiError) {
      aiFormValue.value = {
        id: aiConfig.id,
        enabled: aiConfig.enabled,
        apiKey: aiConfig.apiKey,
        baseUrl: aiConfig.baseUrl,
        model: aiConfig.model
      };

      // 加载提示词
      const { data: promptWord, error: promptError } = await fetchPromptWord();
      if (promptWord && !promptError) {
        aiFormValue.value.promptWord = promptWord;
      } else if (promptError) {
        message.error(promptError?.message);
      }
    } else if (aiError) {
      message.error(aiError?.message);
    }
  } catch (error) {
    message.error($t('page.mediaConfig.message.loadFailed'));
    console.error('加载配置失败:', error);
  }
}

// 媒体配置提交
async function handleMediaSubmit(e: MouseEvent) {
  e.preventDefault();
  try {
    await mediaFormRef.value?.validate();
    dialog.warning({
      title: $t('page.mediaConfig.dialog.confirmSave'),
      content: $t('page.mediaConfig.dialog.confirmSaveContent'),
      positiveText: $t('page.mediaConfig.button.save'),
      negativeText: $t('page.mediaConfig.button.cancel'),
      onPositiveClick: async () => {
        const { data: res, error } = await saveMediaConfig(mediaFormValue.value);
        if (res === 1 && !error) {
          message.success($t('page.mediaConfig.message.saveSuccess'));
          await fetchData();
        } else {
          message.error(error?.message || $t('page.mediaConfig.message.saveFailed'));
        }
      }
    });
  } catch (error) {
    message.error($t('page.mediaConfig.message.saveFailed'));
    console.error('保存失败:', error);
  }
}

// 翻译配置提交
async function handleTranslateSubmit(e: MouseEvent): Promise<void> {
  e.preventDefault();
  try {
    await translateFormRef.value?.validate();
    dialog.warning({
      title: $t('page.mediaConfig.dialog.confirmSave'),
      content: $t('page.mediaConfig.dialog.confirmTranslateSaveContent'),
      positiveText: $t('page.mediaConfig.button.save'),
      negativeText: $t('page.mediaConfig.button.cancel'),
      onPositiveClick: async () => {
        const res = await saveTranslateConfig(translateFormValue.value);
        if (res.data === 1) {
          message.success($t('page.mediaConfig.message.saveSuccess'));
          // 保存成功后重新加载数据
          await fetchData();
        } else {
          message.error(res.error?.message || $t('page.mediaConfig.message.saveFailed'));
        }
      }
    });
  } catch (error) {
    message.error($t('page.mediaConfig.message.saveFailed'));
    console.error('保存失败:', error);
  }
}

// 重置表单
function handleMediaReset(e: MouseEvent) {
  e.preventDefault();
  mediaFormRef.value?.restoreValidation();
  mediaFormValue.value = {
    id: '',
    moviePaths: '',
    tvPaths: '',
    excludePaths: ''
  };
}

function handleTranslateReset(e: MouseEvent): void {
  e.preventDefault();
  translateFormRef.value?.restoreValidation();
  const currentId = translateFormValue.value.id;
  translateFormValue.value = {
    id: currentId,
    appId: '',
    secretKey: '',
    enabled: false
  };
}

// AI配置提交
async function handleAISubmit(e: MouseEvent): Promise<void> {
  e.preventDefault();
  try {
    await aiFormRef.value?.validate();
    dialog.warning({
      title: $t('page.mediaConfig.dialog.confirmSave'),
      content: $t('page.mediaConfig.dialog.confirmAISaveContent'),
      positiveText: $t('page.mediaConfig.button.save'),
      negativeText: $t('page.mediaConfig.button.cancel'),
      onPositiveClick: async () => {
        // 保存AI配置
        const { data: res, error } = await saveAIConfig(aiFormValue.value);

        // 保存提示词
        if (aiFormValue.value.promptWord !== undefined) {
          const { error: promptError } = await savePromptWord(aiFormValue.value.promptWord);
          if (promptError) {
            message.error(promptError?.message || $t('page.mediaConfig.message.saveFailed'));
            return;
          }
        }

        if (res === 1 && !error) {
          message.success($t('page.mediaConfig.message.saveSuccess'));
          await fetchData();
        } else {
          message.error(error?.message || $t('page.mediaConfig.message.saveFailed'));
        }
      }
    });
  } catch (error) {
    message.error($t('page.mediaConfig.message.saveFailed'));
    console.error('保存失败:', error);
  }
}

// AI配置重置
function handleAIReset(e: MouseEvent): void {
  e.preventDefault();
  aiFormRef.value?.restoreValidation();
  const currentId = aiFormValue.value.id;
  aiFormValue.value = {
    id: currentId,
    enabled: false,
    apiKey: '',
    baseUrl: '',
    model: '',
    promptWord: ''
  };
}

// 获取任务列表
async function fetchTaskList() {
  try {
    taskLoading.value = true;
    const { data, error } = await taskApi.getTaskList();
    if (data) {
      taskList.value = data;
    } else {
      message.error(error?.message || $t('page.mediaConfig.message.loadFailed'));
    }
  } catch (error) {
    console.error('获取任务列表失败:', error);
    message.error($t('page.mediaConfig.message.loadFailed'));
  } finally {
    taskLoading.value = false;
  }
}

// 执行任务
async function handleExecuteTask(name: string) {
  try {
    executingTasks.value.add(name);
    const { data, error } = await taskApi.executeTask(name);
    if (data) {
      message.success($t('page.mediaConfig.message.taskExecuteSuccess'));
    } else {
      message.error(error?.message || $t('page.mediaConfig.message.taskExecuteFailed'));
    }
  } catch (error) {
    console.error('执行任务失败:', error);
    message.error($t('page.mediaConfig.message.taskExecuteFailed'));
  } finally {
    executingTasks.value.delete(name);
  }
}

// 获取翻译优先级配置
async function fetchPriorityConfig() {
  try {
    priorityLoading.value = true;
    const { data } = await fetchTranslationOrdering();
    if (data) {
      priorityList.value = data;
    }
  } catch (error) {
    console.error('获取翻译优先级配置失败:', error);
    message.error($t('page.mediaConfig.message.loadFailed'));
  } finally {
    priorityLoading.value = false;
  }
}

// 保存翻译优先级配置
async function handleSavePriority() {
  try {
    priorityLoading.value = true;
    const savePromises = priorityList.value.map((item, index) => {
      return saveTranslationOrdering({
        id: item.id,
        sort: index + 1
      });
    });

    await Promise.all(savePromises);
    message.success($t('page.mediaConfig.priority.saveSuccess'));
    await fetchPriorityConfig();
  } catch (error) {
    console.error('保存翻译优先级配置失败:', error);
    message.error($t('page.mediaConfig.priority.saveFailed'));
  } finally {
    priorityLoading.value = false;
  }
}

// 处理拖拽开始
function handleDragStart(e: DragEvent, index: number) {
  dragIndex.value = index;
  if (e.dataTransfer) {
    e.dataTransfer.effectAllowed = 'move';
  }
  // 添加拖拽样式
  const target = e.target as HTMLElement;
  target.classList.add('dragging');
}

// 处理拖拽放下
function handleDrop(e: DragEvent, dropIndex: number) {
  e.preventDefault();
  // 移除拖拽样式
  const items = document.querySelectorAll('.priority-item');
  items.forEach(item => item.classList.remove('dragging'));

  if (dragIndex.value === dropIndex) return;

  // 更新数组顺序
  const draggedItem = priorityList.value[dragIndex.value];
  priorityList.value.splice(dragIndex.value, 1);
  priorityList.value.splice(dropIndex, 0, draggedItem);

  // 重置拖拽索引
  dragIndex.value = -1;
}

// 监听拖拽排序变化
watch(priorityList, (newList) => {
  newList.forEach((item, index) => {
    item.value = index + 1;
  });
}, { deep: true });

// 初始化时加载所有配置
onMounted(() => {
  fetchData();
  fetchTaskList();
  fetchPriorityConfig();
});
</script>

<template>
  <div class="h-full">
    <NCard :bordered="false" class="h-full overflow-hidden">
      <NTabs v-model:value="activeTab" animated type="line">
        <!-- 媒体配置标签页 -->
        <NTabPane :tab="$t('page.mediaConfig.tabs.media')" name="media">
          <div class="scrollbar h-[calc(100vh-280px)] overflow-auto px-4">
            <NAlert :title="$t('page.mediaConfig.tips.title')" class="mb-4" type="info">
              {{ $t('page.mediaConfig.tips.content') }}
            </NAlert>
            <!--              :rules="mediaFormRules"-->
            <NForm
              ref="mediaFormRef"
              :model="mediaFormValue"
              class="form-container"
              label-placement="left"
              label-width="160"
              require-mark-placement="right-hanging"
            >
              <!-- 电影配置 -->
              <NDivider>{{ $t('page.mediaConfig.sections.movieConfig') }}</NDivider>
              <NFormItem :label="$t('page.mediaConfig.form.moviePaths')" path="moviePaths">
                <NInput
                  v-model:value="mediaFormValue.moviePaths"
                  :placeholder="$t('page.mediaConfig.placeholder.moviePath')"
                  :rows="4"
                  type="textarea"
                />
              </NFormItem>

              <!-- 电视剧配置 -->
              <NDivider>{{ $t('page.mediaConfig.sections.tvConfig') }}</NDivider>
              <NFormItem :label="$t('page.mediaConfig.form.tvPaths')" path="tvPaths">
                <NInput
                  v-model:value="mediaFormValue.tvPaths"
                  :placeholder="$t('page.mediaConfig.placeholder.tvPath')"
                  :rows="4"
                  type="textarea"
                />
              </NFormItem>

              <!-- 排除路径配置 -->
              <NDivider>{{ $t('page.mediaConfig.sections.excludeConfig') }}</NDivider>
              <NFormItem :label="$t('page.mediaConfig.form.excludePaths')" path="excludePaths">
                <NInput
                  v-model:value="mediaFormValue.excludePaths"
                  :placeholder="$t('page.mediaConfig.placeholder.excludePath')"
                  :rows="4"
                  type="textarea"
                />
                <template #feedback>
                  {{ $t('page.mediaConfig.tips.pathFormat') }}
                </template>
              </NFormItem>

              <NSpace class="action-buttons" justify="end">
                <NButton class="reset-button" @click="handleMediaReset">
                  {{ $t('page.mediaConfig.button.reset') }}
                </NButton>
                <NButton class="save-button" type="primary" @click="handleMediaSubmit">
                  {{ $t('page.mediaConfig.button.save') }}
                </NButton>
              </NSpace>
            </NForm>
          </div>
        </NTabPane>

        <!-- 翻译配置标签页 -->
        <NTabPane :tab="$t('page.mediaConfig.tabs.translate')" name="translate">
          <div class="scrollbar h-[calc(100vh-280px)] overflow-auto px-4">
            <NAlert :title="$t('page.mediaConfig.tips.translateTitle')" class="mb-4" type="info">
              {{ $t('page.mediaConfig.tips.translateContent') }}
            </NAlert>
            <NForm
              ref="translateFormRef"
              :model="translateFormValue"
              :rules="translateFormRules"
              class="form-container"
              label-placement="left"
              label-width="160"
              require-mark-placement="right-hanging"
            >
              <!-- 翻译基本配置 -->
              <NDivider>{{ $t('page.mediaConfig.sections.translateConfig') }}</NDivider>
              <NFormItem :label="$t('page.mediaConfig.form.enabled')" path="enabled">
                <NSwitch v-model:value="translateFormValue.enabled" />
                <template #feedback>
                  {{ $t('page.mediaConfig.tips.enabledDesc') }}
                </template>
              </NFormItem>

              <NFormItem :label="$t('page.mediaConfig.form.appId')" path="appId">
                <NInput
                  v-model:value="translateFormValue.appId"
                  :placeholder="$t('page.mediaConfig.placeholder.appId')"
                />
                <template #feedback>
                  {{ $t('page.mediaConfig.tips.appIdFormat') }}
                </template>
              </NFormItem>

              <NFormItem :label="$t('page.mediaConfig.form.secretKey')" path="secretKey">
                <NInput
                  v-model:value="translateFormValue.secretKey"
                  :placeholder="$t('page.mediaConfig.placeholder.secretKey')"
                  show-password-on="click"
                  type="password"
                />
                <template #feedback>
                  {{ $t('page.mediaConfig.tips.secretKeyFormat') }}
                </template>
              </NFormItem>

              <NSpace class="action-buttons" justify="end">
                <NButton class="reset-button" @click="handleTranslateReset">
                  {{ $t('page.mediaConfig.button.reset') }}
                </NButton>
                <NButton class="save-button" type="primary" @click="handleTranslateSubmit">
                  {{ $t('page.mediaConfig.button.save') }}
                </NButton>
              </NSpace>
            </NForm>
          </div>
        </NTabPane>

        <!-- AI配置标签页 -->
        <NTabPane :tab="$t('page.mediaConfig.tabs.ai')" name="ai">
          <div class="scrollbar h-[calc(100vh-280px)] overflow-auto px-4">
            <NAlert :title="$t('page.mediaConfig.tips.aiTitle')" class="mb-4" type="info">
              {{ $t('page.mediaConfig.tips.aiContent') }}
            </NAlert>
            <NForm
              ref="aiFormRef"
              :model="aiFormValue"
              :rules="aiFormRules"
              class="form-container"
              label-placement="left"
              label-width="160"
              require-mark-placement="right-hanging"
            >
              <!-- AI基本配置 -->
              <NDivider>{{ $t('page.mediaConfig.sections.aiConfig') }}</NDivider>
              <NFormItem :label="$t('page.mediaConfig.form.enabled')" path="enabled">
                <NSwitch v-model:value="aiFormValue.enabled" />
              </NFormItem>

              <NFormItem :label="$t('page.mediaConfig.form.apiKey')" path="apiKey">
                <NInput
                  v-model:value="aiFormValue.apiKey"
                  :placeholder="$t('page.mediaConfig.placeholder.apiKey')"
                  show-password-on="click"
                  type="password"
                />
              </NFormItem>

              <NFormItem :label="$t('page.mediaConfig.form.baseUrl')" path="baseUrl">
                <NInput v-model:value="aiFormValue.baseUrl" :placeholder="$t('page.mediaConfig.placeholder.baseUrl')" />
              </NFormItem>

              <NFormItem :label="$t('page.mediaConfig.form.model')" path="model">
                <NInput v-model:value="aiFormValue.model" :placeholder="$t('page.mediaConfig.placeholder.model')" />
              </NFormItem>

              <!-- 添加提示词配置 -->
              <NFormItem :label="$t('page.mediaConfig.form.promptWord')" path="promptWord">
                <NInput
                  v-model:value="aiFormValue.promptWord"
                  type="textarea"
                  :rows="4"
                  :placeholder="$t('page.mediaConfig.placeholder.promptWord')"
                />
                <template #feedback>
                  {{ $t('page.mediaConfig.tips.promptWordFormat') }}
                </template>
              </NFormItem>

              <NSpace class="action-buttons" justify="end">
                <NButton class="reset-button" @click="handleAIReset">
                  {{ $t('page.mediaConfig.button.reset') }}
                </NButton>
                <NButton class="save-button" type="primary" @click="handleAISubmit">
                  {{ $t('page.mediaConfig.button.save') }}
                </NButton>
              </NSpace>
            </NForm>
          </div>
        </NTabPane>

        <!-- 服务任务标签页 -->
        <NTabPane :tab="$t('page.mediaConfig.tabs.task')" name="task">
          <div class="scrollbar h-[calc(100vh-280px)] overflow-auto px-4">
            <NAlert :title="$t('page.mediaConfig.tips.taskTitle')" class="mb-4" type="info">
              {{ $t('page.mediaConfig.tips.taskContent') }}
            </NAlert>

            <NSpace vertical>
              <div class="mb-4 flex justify-end">
                <NButton
                  type="primary"
                  size="small"
                  :loading="taskLoading"
                  class="min-w-[36px]"
                  secondary
                  circle
                  quaternary
                  @click="fetchTaskList"
                >
                  <template #icon>
                    <NIcon>
                      <div class="icon-material-symbols:refresh" />
                    </NIcon>
                  </template>
                </NButton>
              </div>

              <NSpin :show="taskLoading">
                <div class="task-list-container">
                  <TransitionGroup name="task-list" appear>
                    <div
                      v-for="task in taskList"
                      :key="task.name"
                      class="task-list-item"
                      :class="{
                        executing: executingTasks.has(task.name)
                      }"
                    >
                      <div class="item-left">
                        <NIcon size="24" class="task-icon">
                          <div :class="task.icon || 'icon-material-symbols:task'" />
                        </NIcon>
                        <div class="item-content">
                          <div class="item-title">{{ task.value }}</div>
                          <div class="item-desc">
                            <NTag :bordered="false" class="task-tag" round size="tiny">
                              {{ task.name }}
                            </NTag>
                          </div>
                        </div>
                      </div>
                      <div class="item-right">
                        <NPopconfirm
                          :positive-text="$t('common.confirm')"
                          :negative-text="$t('common.cancel')"
                          @positive-click="handleExecuteTask(task.name)"
                        >
                          <template #trigger>
                            <NButton
                              circle
                              secondary
                              type="primary"
                              size="small"
                              :loading="executingTasks.has(task.name)"
                              class="action-btn"
                              :disabled="executingTasks.has(task.name)"
                              :title="$t('page.mediaConfig.task.execute')"
                              quaternary
                            >
                              <template #icon>
                                <NIcon>
                                  <div class="icon-material-symbols:play-arrow" />
                                </NIcon>
                              </template>
                            </NButton>
                          </template>
                          {{ $t('page.mediaConfig.task.confirmExecute') }}
                        </NPopconfirm>
                      </div>
                    </div>
                  </TransitionGroup>
                  <div v-if="taskList.length === 0" class="empty-state">
                    {{ $t('page.mediaConfig.task.noTasks') }}
                  </div>
                </div>
              </NSpin>
            </NSpace>
          </div>
        </NTabPane>

        <!-- 新增优先级配置标签页 -->
        <NTabPane name="priority" :tab="$t('page.mediaConfig.tabs.priority')">
          <NSpace vertical :size="24">
            <NAlert type="info">
              <template #header>
                <div class="flex items-center">
                  <NIcon class="mr-2" size="20">
                    <SvgIcon icon="material-symbols:info-outline" />
                  </NIcon>
                  {{ $t('page.mediaConfig.priority.tips.title') }}
                </div>
              </template>
              {{ $t('page.mediaConfig.priority.tips.content') }}
            </NAlert>

            <div class="priority-list">
              <NSpin :show="priorityLoading">
                <NList hoverable clickable>
                  <NListItem
                    v-for="(item, index) in priorityList"
                    :key="item.id"
                    draggable="true"
                    @dragstart="handleDragStart($event, index)"
                    @dragover.prevent
                    @dragenter.prevent
                    @drop="handleDrop($event, index)"
                  >
                    <div class="priority-item">
                      <div class="drag-handle">
                        <NIcon size="20">
                          <SvgIcon icon="material-symbols:drag-indicator" />
                        </NIcon>
                      </div>
                      <span class="priority-label">{{ item.label }}</span>
                      <div class="priority-value">
                        <NTag :bordered="false" type="primary" size="small">
                          {{ index + 1 }}
                        </NTag>
                      </div>
                    </div>
                  </NListItem>
                </NList>

                <div v-if="!priorityLoading && priorityList.length === 0" class="empty-state">
                  {{ $t('common.noData') }}
                </div>
              </NSpin>
            </div>

            <div class="action-buttons">
              <NButton
                type="primary"
                :loading="priorityLoading"
                @click="handleSavePriority"
              >
                {{ $t('page.mediaConfig.button.save') }}
              </NButton>
            </div>
          </NSpace>
        </NTabPane>
      </NTabs>
    </NCard>
  </div>
</template>

<style scoped>
/* 表单容器样式 */
.form-container {
  max-width: 800px;
  margin: 20px 0;
}

/* 调整表单项间距 */
.form-container :deep(.n-form-item) {
  margin-bottom: 16px;
}

/* 自定义滚动条样式 */
.scrollbar {
  /* Firefox滚动条样式 */
  scrollbar-width: thin;
}

/* Webkit浏览器滚动条样式 */
.scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* 滚动条滑块样式 */
.scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--n-scrollbar-color);
  border-radius: 4px;
}

/* 滚动条滑块悬停样式 */
.scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--n-scrollbar-color-hover);
}

/* 按钮组样式 */
.action-buttons {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--n-border-color);
}

/* 按钮最小宽度 */
.reset-button,
.save-button {
  min-width: 100px;
}

/* 分割线样式 */
.form-container :deep(.n-divider) {
  margin: 24px 0;
}

/* 提示信息样式 */
.form-container :deep(.n-alert) {
  margin-bottom: 24px;
}

/* 任务列表样式 */
.task-list-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 4px;
  border-radius: 8px;
}

.task-list-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
  transform: translateZ(0);
  will-change: transform, background-color;
  border-radius: 4px;
  border: 1px solid var(--n-border-color);
}

.task-list-item:not(:last-child) {
  margin-bottom: 8px;
}

.task-list-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background-color: var(--n-primary-color);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.task-list-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.task-icon {
  color: var(--n-text-color-2);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.task-list-item:hover .task-icon {
  opacity: 1;
  transform: scale(1.1);
  color: var(--n-primary-color);
}

.item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--n-text-color);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
}

.task-tag {
  font-size: 12px;
  padding: 0 8px;
  height: 18px;
  line-height: 18px;
  background-color: var(--n-hover-color);
  color: var(--n-text-color-2);
  transition: all 0.3s ease;
}

.task-list-item:hover .task-tag {
  color: var(--n-primary-color);
}

.action-btn {
  opacity: 0.8;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  z-index: 1;
  transform: scale(1);
  font-size: 16px;
  color: var(--n-text-color-2);
}

.action-btn:hover {
  opacity: 1;
  transform: scale(1.1);
  color: var(--n-primary-color);
}

.executing .action-btn {
  color: var(--n-primary-color);
  animation: pulse 2s infinite;
}

/* 暗色模式适配 */
:root[data-theme='dark'] .task-list-item:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 空状态样式 */
.empty-state {
  padding: 32px;
  text-align: center;
  color: var(--n-text-color-3);
  font-size: 14px;
  background-color: transparent;
  font-weight: 500;
  letter-spacing: 0.2px;
}

/* 任务列表动画 */
.task-list-move,
.task-list-enter-active,
.task-list-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.task-list-enter-from,
.task-list-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}

.task-list-leave-active {
  position: absolute;
  width: 100%;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.priority-list {
  max-width: 600px;
  margin: 0 auto;
  padding: 16px;
  background-color: var(--n-card-color);
  border-radius: 8px;
}

.priority-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  margin-bottom: 8px;
  border: 1px solid var(--n-border-color);
  border-radius: 4px;
  transition: all 0.3s ease;
  background-color: var(--n-color); /* 添加背景色 */
}

.priority-item:hover {
  border-color: var(--n-primary-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.drag-handle {
  cursor: move;
  margin-right: 12px;
  color: var(--n-text-color-3);
  display: flex;
  align-items: center;
}

.priority-label {
  flex: 1;
  font-size: 14px;
  color: var(--n-text-color);
}

.priority-value {
  margin-left: 12px;
}

.priority-value .n-tag {
  min-width: 32px;
  text-align: center;
}

/* 添加过渡动画样式 */
.list-move {
  transition: transform 0.3s ease;
}

.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

.priority-item.dragging {
  opacity: 0.5;
  background-color: var(--n-hover-color);
}

.n-list-item:hover .priority-item {
  background-color: var(--n-hover-color);
}

/* 拖拽时的视觉反馈 */
.n-list-item.drag-over {
  border-top: 2px solid var(--n-primary-color);
}

/* 添加过渡动画 */
.priority-item {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.priority-item:active {
  animation: shake 0.2s ease-in-out;
}
</style>
